<template>
    <div v-if="filmInfo" style="padding-bottom:66px;">
        <detail-header v-top :title="filmInfo.name"></detail-header>
        <div 
            :style="{backgroundImage:'url('+filmInfo.poster+')'}" 
            style="height:200px;background-size:cover;background-position:center;">
        </div>
        <h3>{{filmInfo.name}}--{{filmInfo.filmType.name}}</h3>
        <p>{{filmInfo.category}}</p>
        <!-- 使用过滤器过滤时间戳 -->
        <p>{{filmInfo.premiereAt | dataFilter}} 上映</p>
        <p>{{filmInfo.nation}}|{{filmInfo.runtime}}分钟</p>
        <!-- isShow为true显示所有内容，为false只显示一部分 -->
        <div :class="isShow ? '' : 'synopsis'">
            {{filmInfo.synopsis}}
        </div>
        <div style="text-align:center;">
            <i @click="isShow = !isShow" class="iconfont icon-xiajiantou" :class="isShow ? 'icon-xiangshang' : 'icon-xiajiantou' "></i>
        </div>
        <h3>演职人员</h3>
        <detail-swiper :num="4" :cname="'actor'">
            <div class="swiper-slide" v-for="(actor,index) in filmInfo.actors" :key="index">
                <img :src="actor.avatarAddress" alt="">
                <div style="text-align:center;font-size:12px;">
                    <div>{{actor.name}}</div>
                    <div>{{actor.role}}</div>
                </div>
            </div>
        </detail-swiper>
        <h3>剧照</h3>
        <detail-swiper :num="2" :cname="'photo'">
            <div class="swiper-slide" v-for="(photo,index) in filmInfo.photos" :key="index">
                <div 
                    :style="{backgroundImage:'url('+photo+')'}" 
                    style="height:100px;background-size:cover;background-position:center;">
                </div>
            </div>
        </detail-swiper>
    </div>
</template>
<script>
    import http from '@/utils/http.js'
    import Vue from 'vue'
    import moment from 'moment'
    import detailSwiper from '@/views/detail/DetailSwiper.vue'
    import detailHeader from '@/views/detail/DetailHeader.vue'
    Vue.filter("dataFilter",premiereAt => {
        return moment(premiereAt).format('YYYY-MM-DD')
    })
    Vue.directive("top",{
        inserted(el){
            // console.log(el);
            //默认隐藏
            el.style.display = "none"
            window.onscroll = () => {
                let stop = document.documentElement.scrollTop || document.body.scrollTop
                if(stop >= 50){
                    el.style.display = "block"
                }else{
                    el.style.display = "none"
                }
            }
        },
        unbind(){
            window.onscroll = null
        }
    })
    export default {
        data() {
            return {
                filmInfo:null,
                isShow:false
            }
        },
        components:{
            detailSwiper,
            detailHeader
        },
        mounted() {
            http({
                url:`/gateway?filmId=${this.$route.params.id}&k=8687947`,
                headers:{
                    'X-Host': 'mall.film-ticket.film.info'
                }
            }).then((res) => {
                // console.log(res)
                this.filmInfo = res.data.data.film
            })
        },
    }
</script>
<style lang="scss" scoped>
    .synopsis{
        height: 50px;
        overflow: hidden;
    }
</style>